import {designComponent, markRaw, PropType, reactive, useClasses, watch} from "plain-ui-composition";
import {MdcCase} from "./process/processCaseString";
import {processHtmlString} from "./process/processHtmlString";
import {delay} from "plain-utils/utils/delay";

import {PlCollapseTransition, PlIcon} from "plain-ui";
import {Markdown} from "./markdown/markdown";
import {openRunPage} from "../../run/openRunPage";
import {AppNavigator} from "../natigator/app-navigator";

export const MdcCaseComponent = designComponent({
    props: {
        mdc: {type: Object as PropType<MdcCase>, required: true},
        onlyCase: {type: Boolean},
    },
    setup({props}) {

        const state = reactive({
            Component: null as any,
            style: null as null | string,

            showCode: props.mdc.expand,
            isInitCollapse: props.mdc.expand,
        })

        const classes = useClasses(() => {
            return [
                'pl-mdc-case',
                {
                    'pl-mdc-case-show-code': state.showCode,
                }
            ]
        })

        watch(() => props.mdc, async val => {
            const {template, js, css} = val;
            Object.assign(window, {code: {template, js, css}} as any)

            if (!template && !js) {
                state.Component = null
            } else {
                const decode = await processHtmlString(template, js, css)
                if (!decode) {
                    return state.Component = null
                }
                const {script, style} = decode
                Object.assign(state, {Component: markRaw(script), style})
            }
        }, {immediate: true})

        const handler = {
            toggleCode: async () => {
                const flag = !state.showCode
                // console.log(props.mdc.index)
                if (flag) {
                    if (!state.isInitCollapse) {
                        state.isInitCollapse = true
                        await delay(23)
                    }
                    state.showCode = true
                } else {
                    state.showCode = false
                }
            },
            openRunPage: () => {
                // $$notice.warn('待完成')
                openRunPage(AppNavigator.route.path, props.mdc.index)
            }
        }

        return {
            render: () => {

                const {Component, style} = state

                const Case = !Component ? null : (
                    <div class={'pl-mdc-case-wrapper' + (props.mdc.space ? ' pl-mdc-case-space' : '')}>
                        <Component/>
                        {!!style && (
                            <style>
                                {style}
                            </style>
                        )}
                    </div>
                )

                if (props.onlyCase) {
                    return Case
                }

                return (
                    <div class={classes.value}>
                        {!!props.mdc.title && (
                            <h2>
                                <span>{props.mdc.title == `''` ? '' : props.mdc.title}</span>
                                <div class="pl-mdc-case-operator">
                                    <span class="pl-mdc-case-close-code-btn" onClick={handler.openRunPage}>
                                        <span>在线调试</span>
                                        <PlIcon icon="el-icon-debug-s"/>
                                    </span>
                                    <span onClick={handler.toggleCode} class="pl-mdc-case-close-code-btn">
                                        <span>{state.showCode ? '收起代码' : '查看代码'}</span>
                                        <PlIcon icon="el-icon-d-arrow-left"/>
                                    </span>
                                </div>
                            </h2>
                        )}
                        {!!props.mdc.desc && (<Markdown md={props.mdc.desc}/>)}
                        {Case}
                        {!!props.mdc.bottomDesc && (<div class="pl-mdc-bottom-desc"><Markdown md={props.mdc.bottomDesc}/></div>)}
                        {!!state.isInitCollapse && (<PlCollapseTransition>
                            <div v-show={state.showCode}>
                                {!!props.mdc.content && (
                                    <Markdown md={props.mdc.content}/>
                                )}
                                {!!Component && <>
                                    <Markdown md={"```html\n" + props.mdc.source + "\n```"} class="pl-mdc-case-code"/>
                                    {!!props.mdc.css && <Markdown md={"```css\n" + props.mdc.css + "\n```"} class="pl-mdc-case-code"/>}
                                </>}
                                <div class="pl-mdc-case-close-code-btn-wrapper">
                                    <div class="pl-mdc-case-close-code-btn" onClick={handler.toggleCode}>
                                        <span>收起代码</span>
                                        <PlIcon icon="el-icon-d-arrow-left"/>
                                    </div>
                                </div>
                            </div>
                        </PlCollapseTransition>)}
                    </div>
                )
            }
        }

    },
})
